<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
	<head layout:fragment="contentHead">
		<title>应用列表</title>
	</head>
	<body>
		<div layout:fragment="contentCss">
	  		<link th:href="@{/css/jquery-ui.css}" rel="stylesheet"/>
	    	<link th:href="@{/css/jquery.toast.css}" rel="stylesheet"/>
	  	</div>
		<div layout:fragment="content">
			<h5>應用列表</h5>
			<div class="col-md-12">
				<div class="row">
					<form id="search" th:action="@{'/ipa/search'}">
						<div class="form-row col-auto form-inline">
							<input  name="page" id="page" type="hidden" th:value="1">
							<input class="form-control" name="name" id="name" type="text" th:value="${name}">
							<div class="form-group my-1">
								<button class="btn btn-primary" type="submit" ><i
										class="fa fa-search"></i>查询
								</button>
								<div class="btn btn-primary" onclick="showAddModal();">新增</div>
							</div>
						</div>
					</form>
				</div>
				<div class="row">
					<table class="table table-bordered mt-15">
						<thead>
							<tr>
								<th>图标</th>
								<th>包名</th>
								<th>安装包ID</th>
								<th>下载地址</th>
								<th>版本</th>
								<th>修改时间</th>
								<th>设备量</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="sortable">
							<tr th:if="${#lists.isEmpty(page.getRecords())}" class="indexData">
								<td colspan="7" style="text-align: center;">查无数据</td>
							</tr>
							<tr th:unless="${#lists.isEmpty(page.getRecords())}" class="indexData" th:each="item : ${page.getRecords()}" th:id="'dataTr' + ${item.id}">
								<td width="10%"><img alt=""  th:src="@{${item.icon}}" width="20px" height="20px"/></td>
								<td width="10%">[[${item.name}]]</td>
								<td width="20%">[[${item.bundleIdentifier}]]</td>
								<td width="20%">[[${item.downloadUrl}]]</td>
								<td width="20%">[[${item.version}]]</td>
								<td width="20%">[[${#temporals.format(item.updateTime, 'yyyy-MM-dd HH:mm:ss')}]]</td>
								<td width="20%">[[${item.count}]]</td>
								<td width="20%">
									<a href="javascript:void(0);" class="btn btn-primary btn-xs btn-t edit-show" th:data-id="${item.id}" onclick="showEditModal(this)">修改IPA</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div th:include="page :: page"></div>
			</div>
			<!-- Modal -->
			<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title">上传</h4>
						</div>
						<input id="ipaId" type="hidden" name="ipaId">
						<div class="modal-body">
							<form id="addIpaForm">
								<div class="row ml-12 mt-5">
									<div class="col-md-3 custom-label" >
										<span style="color: red; ">*  </span>IPA:
									</div>
									<div class="col-md-9">
										<input id="file" type="file" name="file" class="form-control" >
									</div>
								</div>
								<div class="row ml-12 mt-5">
									<div class="col-md-3 custom-label">
										<span style="color: red; ">*  </span>叙述:
									</div>
									<div class="col-md-9">
										<textarea id="summary" name="summary" class="form-control" ></textarea>
									</div>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" id="addIpaBtn" class="btn btn-primary" onclick="upload('insert')">确定新增</button>
							<button type="button" id="editIpaBtn" class="btn btn-primary" onclick="upload('edit')">确定修改</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
		<!-- /.modal -->
		</div>
	</body>
	<div layout:fragment="contentJs">
		<script th:src="@{/js/jquery-ui-1.11.0.min.js}" type="text/javascript"></script>
	    <script th:src="@{/js/jquery.toast.js}" type="text/javascript"></script>
    	<script th:src="@{/js/myToast.js}" type="text/javascript"></script>
		<script type="text/javascript">
			function showAddModal(){
                $("#myModalAdd").modal("show");
                $("#editIpaBtn").hide();
                $("#addIpaBtn").show();
                $("#ipaId").val();
			}
			
			function upload(method){
                var formData = new FormData();  //建構new FormData()
                var fileData = $("input[name=file]")[0].files[0];   //取得上傳檔案屬性
                var summary = $('#summary').val();

                formData.append('ipaFile', fileData);  //吧物件加到file後面
                formData.append('summary', summary);

                var url = "/ipa/uploadPackage";
                if(method==='edit'){
                    var id = $("#ipaId").val();
                    url += "/"+id;
				}

				$.ajax({
					type: "POST",
					url: url,
					data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
					success: function(data)
					{
						if("200" == data.code){
							myToast(data.msg);
							location.reload();
						}else{
							myToastError(data.msg);
						}
					}
				});
			}

			function showEditModal(element){
                $("#myModalAdd").modal("show");
                $(element).attr("data-id")
                $("#ipaId").val($(element).attr("data-id"));
                $("#addIpaBtn").hide();
                $("#editIpaBtn").show();
			}

            function pagination(page) {
                var name = $("#name").val();
                $("#name").val(name);
                $("#page").val(page);
                $("#search").submit();
            }
		</script>
	</div>
</html>